<template>
  <div class="about">
    <p>{{aboutObj}}</p>
    <h1>{{msg}}</h1>
    <button @click="changeMsg">改变msg</button>
    <button @click="aaa">触发父组件</button>
    <br />
    <h2>{{msgChanged}}</h2>
    <h3>{{computedMsgCount}}</h3>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";

@Component({})
export default class About extends Vue {
  // prop,子组件需要被传递的数据
  @Prop()
  private aboutObj: object;

  // 相当于data中定义好的响应式变量
  private msg: string = "这里是about子组件，我是变量msg";
  private msgChanged: string = "";
  private msgCount: number = 0;

  // 相当于methods中的方法
  private changeMsg() {
    this.msg = `我是改变后的msg，值为${this.msgCount++}`;
    console.log(this.msgCount);
  }

  // watch监听
  @Watch("msg")
  private onMsgChanged(val: string) {
    this.msgChanged = `这里是Watch，msg变量改变了，值为：${val}`;
  }

  // 子组件触发到父组件的事件
  @Emit("aboutEmit")
  private aaa() {
    return "这里是Emit，子组件about触发出去的事件";
  }

  // 计算属性
  get computedMsgCount() {
    return `我是计算属性，${this.msgCount}`;
  }

  // set computedMsgCount(e){
  //   console.log(e)
  // }

  // 以下是vue的生命周期（private可以不写）
  private beforeCreate() {
    // console.log(this)
  }

  created() {}

  beforeMount() {}

  mounted() {}

  beforeUpdate() {}

  updated() {}

  beforeDestroy() {}

  destroyed() {}
}
</script>
